// 背景颜色
.bg-white {
  background-color: white;
}
.bg-gray {
  background-color: #f1f1f1;
}
.bg-black {
  background-color: black;
}
.bg-blue-light {
  background-color: #f0f2f5;
}
// 文本色
.text-red {
  color: red !important;
}

// flex 布局
.flex {
  display: flex !important;
}
.flex-inline {
  display: inline-flex !important;
}
.flex-between {
  justify-content: space-between;
}
.flex-around {
  justify-content: space-around;
}
.flex-center {
  justify-content: center;
}
.flex-items {
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.flex-grow {
  flex-grow: 1;
}
.flex-stretch {
  align-content: stretch;
}

// 文本
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
// 文本省略
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-line-1 {
  white-space: nowrap;
}

// 阴影
.shadow-1 {
  box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.2);
}
.shadow-2 {
  box-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.2);
}

.shadow-dark-1 {
  box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.5);
}
.shadow-dark-2 {
  box-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.5);
}

// 宽 - 高
.full-height {
  height: 100%;
}

// 定位
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.absolute-all {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

//边框
.border {
  border: 1px solid #eee;
}
.border-bottom {
  border-bottom: 1px solid #eee;
}
.border-dark {
  border: 1px solid #777;
}

// 过渡
@daily: 0.25s;
// fate-x 入场动画
.fade-x-enter-active,
.fade-x-leave-active {
  transition: transform @daily ease-in-out, opacity @daily ease-in-out;
}
.fade-x-enter-from,
.fade-x-leave-to {
  transform: translateX(-5%);
  opacity: 0.2;
}

// fade-scale 入场动画
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: transform @daily ease-in-out, opacity @daily ease-in-out;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
  transform: scale(0);
  opacity: 0;
}

// fade-opacity 入场动画
.fade-opacity-enter-active,
.fade-opacity-leave-active {
  transition: opacity @daily ease-in-out;
}
.fade-opacity-enter-from,
.fade-opacity-leave-to {
  opacity: 0;
}

// 生成margin, padding 简化的class
// margin padding
@mpArr: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
@step: 4px;

// 定义循环最大值，此处使用颜色数组的长度
@len: length(@mpArr);

.Loop(@index) when(@index<=@len) {
  // 执行内容
  // 类名参数要加大括号@{index}
  // 根据index获取对应的某个值 extract(数组名, 对应的序号)

  // pa padding pt padding-top .ant-layout
  .pa-@{index} {
    padding: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .pt-@{index} {
    padding-top: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .pb-@{index} {
    padding-bottom: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .pl-@{index} {
    padding-left: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .pr-@{index} {
    padding-right: unit(extract(@mpArr, @index) * @step, px) !important;
  }

  // ma margin
  .ma-@{index} {
    margin: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .mt-@{index} {
    margin-top: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .mb-@{index} {
    margin-bottom: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .ml-@{index} {
    margin-left: unit(extract(@mpArr, @index) * @step, px) !important;
  }
  .mr-@{index} {
    margin-right: unit(extract(@mpArr, @index) * @step, px) !important;
  }

  //递归调用 达到循环目的
  .Loop(@index+1);
}

// 调用循环
.Loop(1);
